【OnePageScroll】1ページずつをスクロールして切り替える方法 |
您所在的位置：网站首页 › verticalhorizontal scroll one page in jquery › 【OnePageScroll】1ページずつをスクロールして切り替える方法 |
【OnePageScroll】1ページずつをスクロールして切り替える方法
|
1ページの中で複数のコンテンツをスクロールしながら入れ替えることができるプラグインを紹介したいと思います。 1ページの中で画面ごとに切り替えて見せたいときに便利だと思います。 OnePageScrollダウンロード方法必要なファイルjshtml最後に OnePageScroll ダウンロード方法下記のURLからファイルをダウンロードすることができます。  jQuery One Page Scroll by Pete R. | The Pete DesignCreate an Apple-like one page scroller website (iPhone 5S website) with One Page Scroll pluginGitHubの画面の右上にある「Code」から「Download ZIP」でファイルをダウンロードします。 必要なファイルダウンロード後のファイルから下記のファイルを持ってきます。 jquery.onepage-scroll.min.jsonepage-scroll.css jsjsは下記のように記述します。 jQuery(function () { jQuery(".main-cont").onepage_scroll({ }); });上記でも動作しますが細かいオプションもあるので下記のように記述します。 jQuery(function () { jQuery(".main-cont").onepage_scroll({ sectionContainer: "section", // セクションとなる要素（divなどに変更も可） easing: "ease", // イージングの指定をする（ease、linear、ease-in、ease-out、ease-in-out" animationTime: 1000, // スクロールのアニメーション時間を指定 pagination: true, // ページネーション表示の有無を指定 updateURL: false // ページをスクロールしたときにURLを変更するかの有無を指定 }); }); htmlhtmlは下記のように記述します。 ～が一つのコンテンツになります。 1コンテンツ目 2コンテンツ目 3コンテンツ目 最後にOnePageScrollは同じページの中でコンテンツをスクロールによって分けて表示させたいときにとても便利なプラグインです。 オプションを指定すればスクロールの挙動や表示の速さなど細かく指定することができます。 サイトにパララックスのような挙動を入れたいときにおすすめしたいプラグインです。 |
【本文地址】